<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册页面</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		body{
			margin:0;
			padding: 0;
		}
		.bgppage{
			margin:0;
			padding: 0;
			width: 1000px;
			height: 667px;
			background:url("img/nsk.png") no-repeat;
			background-size:100% 100%;
		}
		.logpage{
			position:fixed;
			left: 70%;
			top: 20%;
			width: 220px;
			height: 40%;
			background: #fff;
			border: 1px solid #aaa;
			border-radius: 3px;
		}
		input{
			height: 40px;
			border:1px solid pink;
			border-radius: 5px;
		}
		input::-webkit-input-placeholder{
			color: pink;
		}
		button{
			width: 178px;
			height: 40px;
		}
	</style>
</head>
<body>
	<div class="container bgppage">
		<div class="container logpage">
			<h1 class="text-primary">注册界面</h1>	
			<input type="text" maxlength="12" placeholder="请输入用户名">
			<br>
			<span class="tap1"></span>
			<br>
			<input type="password" placeholder="请输入密码">
			<br>
			<span class="tap2"></span>
			<br>
			<button class="btn btn-primary" onclick="regin()">注册</button><br><a href="http://localhost:8989/log">已注册，请登录</a>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			pubuliu();
		})
		pubuliu();
	})
		
	function pubuliu(){
		let x=window.innerWidth,
			y=window.innerHeight;
		$(".bgppage").css({
			width:x,
			height:y
		});
	}

	//检测输入值
	$("input[type=text]").on("input",function(){
		let reg=/^\w{6,12}$/;
		let username=this.value;
		if(username.length>=6&&username.length<=12){
			$(".tap1").html("该用户名可用").css({
				color:'green'
			})
		}else{
			$(".tap1").html("用户名为6-12位").css({
				color:'red'
			})
		}
		// console.log(reg.test(this.value),username,$(".tap1")[0])
	})
	$("input[type=password]").on("input",function(){
		let reg=/^\w{6,}$/;
		let pwd=this.value;
		if(pwd.length>=6){
			$(".tap2").html("该密码符合要求").css({
				color:'green'
			})
		}else{
			$(".tap2").html("密码大于6位").css({
				color:'red'
			})
		}
		// console.log(reg.test(this.value),pwd,$(".tap2")[0])
	})

	//注册
	function regin() {
		if($(".tap1").html()=='该用户名可用'&&$(".tap2").html()=='该密码符合要求'){
			$.ajax({
				url:"http://localhost:8989/regin",
				data:{
					name:$('input:eq(0)').val(),
					pwd:$('input:eq(1)').val()
				},
				success:function(res){
					console.log('登录',res)
					if(res=="名字已被使用"){
						alert("名字已被使用")
					}else{
						location.href='http://localhost:8989/log'
					}
				}
			})
		}else{
			alert('请按要求操作')
		}
	}
</script>
</html>